---
title: Guidelines
---

<ReactExample exampleId="Text-default" />

See also the general guidelines in [Typography](/foundation/typography/).

## When to use

- To communicate information.
- To control the visual styling of text.
- Only sparingly to add necessary information with a clear purpose.

## When not to use

- To add structure and divide screens into sections---use a [heading](/components/text/heading/).

## Component status

<ComponentStatus component="Text" />

## Content structure

![Size: distinguishes the importance of the text and is the primary way to create a hierarchy; type: distinguishes the purpose of the text and enables a hierarchy without sacrificing readability.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:210%3A0)

## Look & feel

### Base everything off normal primary

Start with normal-sized, primary, unweighted text.
Then add importance first with size and then weight.
Show less important things first with smaller text and then with secondary color.

### Keep all text in a block one color

Inside a paragraph, all the text should be the same color.
To emphasize something, use a stronger weight.

<GuidelineImages>

<DoImage>

![A sentence with two words in bold indicating emphasis.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:56%3A2)

Use weight for emphasis.

</DoImage>

<DontImage>

![A sentence with words in green and red to indicate emphasis.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:56%3A1)

Don't use color for emphasis.

</DontImage>

</GuidelineImages>

### Text size

The basic styling options for text are the three possible sizes
(<InlineToken name="fontSizeTextSmall" alternateName />, <InlineToken name="fontSizeTextNormal" alternateName />,
and <InlineToken name="fontSizeTextLarge" alternateName />).
These sizes should give you a clear hierarchy for all your text.

<ReactExample exampleId="Text-sizes" />

Using only these sizes should be enough for the basics.
When you have a hierarchy set,
you can use color and weight to emphasize certain parts and de-emphasize others.

### Text color

There are two main colors to work with:
primary (<InlineToken name="colorTextPrimary" alternateName />)
and secondary (<InlineToken name="colorTextSecondary" alternateName />).

<ReactExample exampleId="Text-color" />

Start with primary text as your baseline.
Then if you need to de-emphasize some text (which is a good way of emphasizing other text),
use secondary text to show that it's not as important.

We also have supplementary colors
for when you need to match text to a specific status
(as in [alerts](/components/information/alert/#alert-types))
or when you're writing on a dark background.

### Text weight

When size and color aren't enough
or when you need to emphasize text inside a larger paragraph,
you can use weight to add emphasis.

There are only **two** possible weights for text: normal and bold.
In combination with size and color, this should be enough for all your needs.
(See [Figma-specific guidelines](/components/text/text/figma/) for more on weights there.)

<ReactExample exampleId="Text-weight" />
